<template>
  <n-grid x-gap="12" :cols="3" class="mb-3">
    <n-gi>
      <n-card title="客户数量"> {{ cookStaticData.user_count }}</n-card>
    </n-gi>
    <n-gi>
      <n-card title="今日日新增用户"> {{ cookStaticData.today_user_count }}</n-card>
    </n-gi>
    <n-gi>
      <n-card title="昨日新增用户"> {{ cookStaticData.yesterday_user_count }}</n-card>
    </n-gi>
    
    <n-gi>
      <n-card title="今日新增菜品"> {{ cookStaticData.today_dish_count }}</n-card>
    </n-gi>
    <n-gi>
      <n-card title="昨日新增菜品"> {{ cookStaticData.yesterday_dish_count }}</n-card>
    </n-gi>
  </n-grid>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { useUserStore } from '@/store/modules/user';
import { useRouter } from 'vue-router';
import {
  cookStatisticsData,
} from '@/api/common';

const userStore = useUserStore();
const router = useRouter();
const cookStaticData = ref({});
const getCookStatisticData = () => {
  cookStatisticsData().then((res) => {
    cookStaticData.value = res;
  });
};
onMounted(() => {
  getCookStatisticData();
});
</script>

<style lang="less" scoped></style>
